<template>
  <div class="shoplist border-top">
    <div v-if="shopList[0]">
      <header class="title">
        <van-icon name="shop-o" />
        <span>附近商家</span>
      </header>
      <div class="shoplist_container">
        <van-list>
          <van-cell v-for="item of shopList" :key="item.id">
            <!-- shop?geohash=23.18673,113.85715&id=3276 -->
            <router-link
              tag="div"
              :to="{path:'/shop',query:{geohash:item.latitude+','+item.longitude,id:item.id}}"
            >
              <div class="shop">
                <div class="shop_img">
                  <van-image lazy-load :src="'//elm.cangdu.org/img/'+item.image_path" alt="商家" />
                </div>
                <div class="shop_info">
                  <div class="info_title">
                    <div class="title_left">
                      <van-tag text-color="#000" v-if="item.is_premium" color="#ECD930">品牌</van-tag>
                      <h4>{{item.name}}</h4>
                    </div>
                    <div class="title_right">
                      <van-tag plain v-if="item.is_premium">保</van-tag>
                      <van-tag plain v-if="item.is_new">准</van-tag>
                      <van-tag plain>票</van-tag>
                    </div>
                  </div>
                  <div class="info_center">
                    <div class="center_left">
                      <van-rate
                        v-model="item.rating"
                        size="0.25rem"
                        disabled
                        disabled-color="#ffd21e"
                      />
                      <span>{{item.rating}}</span>
                      <span class="order_section">月售{{item.id}}单</span>
                    </div>
                    <div class="center_right">
                      <van-tag type="primary">蜂鸟专送</van-tag>
                      <van-tag type="primary" plain>准时达</van-tag>
                    </div>
                  </div>
                  <div class="info_footer">
                    <div
                      class="footer-left"
                    >¥{{item.float_minimum_order_amount}}起送/配送费约¥{{item.float_delivery_fee}}</div>
                    <div class="footer-right">
                      <span>{{item.distance}}/</span>
                      <span class="order_time">{{item.order_lead_time}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </router-link>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shoplist",
  props: ["shopList"]
};
</script>

<style lang="stylus" scoped>
.shoplist {
  margin-top: 0.3rem;
  background-color: #fff;
  color: #999;

  .error {
    font-size: 16px;
    padding: 10px;
    text-align: center;
  }
}

.title {
  display: flex;
  font-size: 0.5rem;
  height: 1.1rem;
  align-items: center;
  padding: 0 0.2rem;

  span {
    font-size: 0.35rem;
    margin-left: 0.1rem;
  }
}

.van-tag {
  padding: 0 0.2em;
}

.shop {
  display: flex;
  font-size: 0.25rem;

  .shop_img {
    width: 2rem;
    height: 2rem;
    margin-right: 0.2rem;

    img {
      width: 100%;
    }
  }

  .shop_info {
    display: flex;
    flex: auto;
    color: #666;
    flex-direction: column;
    justify-content: space-between;

    .title_left {
      font-size: 0.5rem;

      h4 {
        font-size: 16px;
        color: #333;
      }

      .van-tag {
        margin-right: 0.1rem;
      }
    }

    .title_right .van-tag, .center_right .van-tag {
      transform: scale(0.8);
      margin-left: -0.05rem;
    }

    .center_right .van-tag {
      margin-left: -0.2rem;
    }

    .info_title, .info_center, .info_footer, .title_left {
      display: flex;
    }

    .info_title, .info_center, .info_footer {
      justify-content: space-between;
    }

    .order_time {
      color: #3190e8;
    }

    .order_section {
      margin-left: 0.1rem;
    }
  }
}
</style>